<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>sama</title>
    <style>
    *{
        margin: 0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    html{
        font-size:10px;
    }
    body{
        background-color: #f5f5f5;
        font-size: 1.2em;
    }
    .header{
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
        position: fixed;
        width: 100%;
    }
    .header h1{
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
    }
    .content{
        padding-top: 40px;
        background-color: #fff;
    }
    .content .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
    .content .item img{
        display: block;
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
    }
    .content .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
    }
    .content .item .date{
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 40px;
    }
    .footer a{
        position: relative;
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 40px;
        text-align: center;
        color: #666;
        background-color: #eee;
        text-decoration: none;
    }
    .footer a:before{
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        width: 1px;
        height: 20px;
        background-color: #ccc;
    }
    .footer a:first-child:before{
        display: none;
    }
    </style>
    <link rel="stylesheet" href="css/dropload.css">
    <link rel="stylesheet" href="css/amazeui.css">
</head>
<body>
<div class="header">
    <h1>sama</h1>
</div>
<div class="content">
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false}' style="height: 11.25rem;">
        <ul class="am-slides">
            <li><img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"  style="height: 11.25rem;"></li>
            <li><img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"  style="height: 11.25rem;"></li>
            <li><img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"  style="height: 11.25rem;"></li>
        </ul>
    </div>

    <div class="lists">
        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default" data-am-gallery="{ pureview: true }" >
            <h3 class="am-gallery-title"><img src="img/2.jpg" style="width: 30px;height: 30px;">昵称</h3>
            <div class="am-gallery-desc">内容</div>
            <div class="am-gallery-desc"> <span>2375-09-26</span><span>频道名</span><span>热门</span><span style="float: right">查看</span></div>
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"  alt="远方 有一个地方 那里种有我们的梦想"/>
                    </a>
                </div>
            </li>
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-2.jpg" class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"  alt="某天 也许会相遇 相遇在这个好地方"/>
                    </a>
                </div>
            </li>
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-3.jpg" class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"  alt="不要太担心 只因为我相信"/>
                    </a>
                </div>
            </li>
            <li>
                <div class="am-gallery-item">
                    <a href="http://s.amazeui.org/media/i/demos/bing-4.jpg" class="">
                        <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg"  alt="终会走过这条遥远的道路"/>
                    </a>
                </div>
            </li>
        </ul>

    </div>
</div>

<!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
<script src="js/jquery.min.js"></script>
<script src="js/switchRem.js"></script>
<script src="js/dropload.js"></script>
<script src="js/amazeui.js"></script>

<script>
$(function(){
    var counter = 0;
    // 每页展示4个
    var num = 4;
    var pageStart = 0,pageEnd = 0;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据-自定义内容</div>'
        },
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/update.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
//                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
//                                        +'<img src="'+data.lists[i].pic+'" alt="">'
//                                        +'<h3>'+data.lists[i].title+'</h3>'
//                                        +'<span class="date">'+data.lists[i].date+'</span>'
//                                    +'</a>';

                        result +=   `<ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
                        am-avg-md-3 am-avg-lg-4 am-gallery-default" data-am-gallery="{ pureview: true }" >
                        <h3 class="am-gallery-title">昵称</h3>
                            <div class="am-gallery-desc">内容</div>
                            <div class="am-gallery-desc"> <span>2375-09-26</span><span>频道名</span><span>热门</span><span style="float: right">查看</span></div>

                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"  alt="远方 有一个地方 那里种有我们的梦想"/>
                            </a>
                            </div>
                            </li>
                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-2.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"  alt="某天 也许会相遇 相遇在这个好地方"/>
                            </a>
                            </div>
                            </li>
                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-3.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"  alt="不要太担心 只因为我相信"/>
                            </a
                            </div>
                            </li>
                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-4.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg"  alt="终会走过这条遥远的道路"/>
                            </a>
                            </div>
                            </li>
                            </ul>`;
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置索引值，重新拼接more.json数据
                        counter = 0;
                        // 解锁
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/more.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    counter++;
                    pageEnd = num * counter;
                    pageStart = pageEnd - num;

                    for(var i = pageStart; i < pageEnd; i++){
//                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
//                                        +'<img src="'+data.lists[i].pic+'" alt="">'
//                                        +'<h3>'+data.lists[i].title+'</h3>'
//                                        +'<span class="date">'+data.lists[i].date+'</span>'
//                                    +'</a>';

                        result +=   `<ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
                        am-avg-md-3 am-avg-lg-4 am-gallery-default" data-am-gallery="{ pureview: true }" >
                        <h3 class="am-gallery-title">昵称</h3>
                            <div class="am-gallery-desc">内容</div>
                            <div class="am-gallery-desc"> <span>2375-09-26</span><span>频道名</span><span>热门</span><span style="float: right">查看</span></div>

                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-1.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"  alt="远方 有一个地方 那里种有我们的梦想"/>
                            </a>
                            </div>
                            </li>
                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-2.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"  alt="某天 也许会相遇 相遇在这个好地方"/>
                            </a>
                            </div>
                            </li>
                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-3.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"  alt="不要太担心 只因为我相信"/>
                            </a>
                            </div>
                            </li>
                            <li>
                            <div class="am-gallery-item">
                            <a href="http://s.amazeui.org/media/i/demos/bing-4.jpg" class="">
                            <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg"  alt="终会走过这条遥远的道路"/>
                            </a>
                            </div>
                            </li>
                            </ul>`;
                        if((i + 1) >= data.lists.length){
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                            break;
                        }
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });
});
</script>
</body>
</html>